<template>
    <div class="check mt-5">
        <div class="info">
            <!-- <div class="s-tip c-title-4" style="font-weight: 600;">签到赚取能量</div> -->
            <div class="s-tip c-title-4" style="font-weight: 600">{{ $t("message.CheckIn.a") }}</div>
            <!-- <v-btn color="#FCC235" @click="onClocked"> <img class="btn-img" src="./img/day.png" />{{user.signIn ? "已簽到" : "簽到"}} </v-btn> -->
            <v-btn color="#FCC235" @click="onClocked"> <img class="btn-img" src="./img/day.png" />{{ user.signIn ? $t("message.CheckIn.b") : $t("message.CheckIn.c") }} </v-btn>
        </div>
        <!-- <div class="c-title-4">签到获得总能量<span class="main-color">{{energyTotal}}</span> -->
        <div class="c-title-4">
            {{ $t("message.CheckIn.d") }}
            <span class="main-color">
                <JEnergy :num="energyTotal"></JEnergy>
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useAccount } from "@/stores/account";
import { useClocked } from "@/stores/clocked";
import { useUser } from "@/stores/user";
import JEnergy from "@/components/j-energy/index.vue"
import i18n from "@/locals";

// const isRegister = ref(true);
const clocked = useClocked();

const account = useAccount();
const user = useUser();

onMounted(() => {
    user.getEnergyFlow();
})

const myAccount = ref("1221223@google.com");
const energyTotal = computed(() => {
    if (!user.energyList) return 0;
    let t = 0;
    user.energyList.forEach(item => {
        if (item.action.indexOf("SIGN_IN_") != -1) {
            t += item.amount;
        }
    });
    return t;
});

const onClocked = () => {
    clocked.changePopClocked(true);
};

const items = ref([
    {
        // title: "主頁",
        title: i18n.global.t("message.Global.Home"),
        disabled: false,
        href: "/"
    },
    {
        // title: "獎勵中心",
        title: i18n.global.t("message.Global.child.h"),
        disabled: true,
        href: ""
    }
]);
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
